<template lang='pug'>
  .page
    .AccountsReceivableManage
      .pl-20.pr-20.bg-white
        Table.hasTitle-table.beautiful-table(:columns="thead" :data="tableData" :stripe="true" ref="demoTable" @on-selection-change="handleOnSelectChange")
          .clearfix.font-16(slot="header")
            .table-title-lefttxt.pull-left
              |合计
              span.text-info.pl-5.pr-5.font-weight {{tableComone.totalRows}}
              |条

          .clearfix.pl-20.pr-20(slot="footer")
            Page(
              :total="tableComone.totalRows"
              @on-change="onChangePage"
              @on-page-size-change="onpageSizeChange"
              show-sizer
              show-total
              placement="top"
              prev-text="上一页"
              next-text="下一页"
              :page-size-opts="[10, 20, 30, 50, 100]"
            )
          template(slot-scope="{ row, index }" slot="action")
            Button.mr-10(type="text" size="small" @click="getCategory(row)") 流程详情
            Button.mr-10(type="text" size="small" @click="handleShowProgressModal(row)") 进度查看
            Button.mr-10(type="text" size="small" @click="handleDownLoadAttachment(row)" :disabled="!row.annexPath") 附件下载

    //- 进度查看弹窗
    ProgressModal(ref="ProgressModal")
</template>


<script>
import { WorkFlowApi } from '../WorkFlow.api.js';
import _cloneDeep from 'clone-deep'
import { listThead } from '../tableHead.js'
import ProgressModal from './modal/progressModal';

export default {
  name: 'myDone',

  props: {},

  components: {ProgressModal},

  data () {
    return {
      thead: _cloneDeep(listThead),
      tableData: [],
      selectedId: [], // 勾选的id集合,array格式
      selectedArr: [], // 勾选的id, name数组集合
      tableComone: {
        pageIndex: 1,
        totalRows: 0,
        pageSize: 10
      },
    }
  },


  computed: {},

  watch: {},

  beforeMount () {},

  mounted () {
    this.query()
  },

  methods: {
    // 搜索
    searchFn () {
      this.tableComone.pageIndex = 1
      this.query()
    },

    // 分页页码变动
    onChangePage (val) {
      this.tableComone.pageIndex = val
      this.query()
    },

    // 表格选择操作
    handleOnSelectChange (value) {
      this.selectedArr = value.map((item) => {
        return { id: item.id, name: item.invoiceItem }
      })
      this.selectedId = value.map((item) => {
        return item.id
      })
      console.log('列表勾选数组1', this.selectedArr)
      console.log('列表勾选数组2', this.selectedId)
    },

    // 分页页码变动
    onpageSizeChange (val) {
      this.tableComone.pageIndex = 1
      this.tableComone.pageSize = val
      this.query()
    },

    // 获取列表
    query() {
      var params = {
        HasPaging: true,
        PageIndex: this.tableComone.pageIndex,
        PageSize: this.tableComone.pageSize,
      }
      WorkFlowApi.GetMyDone(params).then(resp => {
        console.log('%c resp: ', 'color:red', resp)
        if (resp.data.success) {
          this.tableData = resp.data.data
          this.tableComone.totalRows = resp.data.totalRows
        }
      })
    },

    // 打开进度查看弹窗
    handleShowProgressModal(row) {
      this.$refs.ProgressModal.show()
      this.$refs.ProgressModal.query(row.primaryKeyID)
    },

    // 是否通过前询问
    isShowPassModal () {
      this.$Modal.confirm({
        title: '是否通过该条流程审批',
        onOk: () => {
          this.handleSurePass()
        }
      })
    },

    // 确认通过
    handleSurePass() {
      console.log('点击了确认通过')
    },

    // 流程详情
    getCategory(row) {
      const workFlowContent = JSON.parse(row.workFlowContent)
      // 0-待遇 1-社保 2-公积金 4-商保 8-工资
      console.log('流程详情 workFlowContent: ', workFlowContent.Category)
      switch (workFlowContent.Category) {
          case 0:
            this.$router.push({ path: '/treatmentApplyList', name: 'treatmentApplyList', query: {commonNo: workFlowContent.CommonNo} })
            break;
          case 1:
            this.$router.push({ path: '/ssApplyList', name: 'ssApplyList', query: {commonNo: workFlowContent.CommonNo} })
            break;
          case 2:
            this.$router.push({ path: '/pfApplyList', name: 'pfApplyList', query: {commonNo: workFlowContent.CommonNo} })
            break;
          case 4:
            this.$router.push({ path: '/cApplyList', name: 'cApplyList', query: {commonNo: workFlowContent.CommonNo} })
            break;
          case 8:
            this.$router.push({ path: '/sApplyList', name: 'sApplyList', query: {commonNo: workFlowContent.CommonNo} })
            break;
        }
    },

    // 附件下载
    handleDownLoadAttachment (row) {
      if (row.annexPath) {
        let str = row.annexPath
        console.log('附件下载: ', str.substring(str.indexOf('\Content') - 1))
        let path = str.substring(str.indexOf('\Content') - 1)
        window.open(path, '_blank')
      } else {
        this.$Message.warning({
          content: '不能下载',
          duration: 10,
          closable: true
        })
      }
    },
  },
}
</script>